<!DOCTYPE html>
{% load static %}
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <title>分页测试</title>
</head>
<body>
<br>
<div class="text-center">
    {% for account in accounts %}
    <span>账户名： {{ account }} <br/></span>
    {% endfor %}
</div>

{# 实现分页标签的代码 #}
{# 这里使用 bootstrap 渲染页面 #}
<div id="pages" class="text-center">
    <nav>
        <ul class="pagination">
            <li class="step-links">
                {% if accounts.has_previous %}
                <a class='active' href="?page={{ accounts.previous_page_number }}">上一页</a>
                {% endif %}

                <span class="current">
                    Page {{ accounts.number }} of {{ accounts.paginator.num_pages }}</span>

                {% if accounts.has_next %}
                <a class='active' href="?page={{ accounts.next_page_number }}">下一页</a>
                {% endif %}
            </li>
        </ul>
    </nav>
</div>
</body>
</html>